<template>
  <div id="box">
        <table id="tab">
          <thead>
            <tr>
              <th>id</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>标签</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr id="list-item" v-for="(item, key) in data" :key="key" @click="go(item.key)">
              <td>{{ item.id }}</td>
              <td>{{ item.goods_name }}</td>
              <td>￥{{ item.goods_price.toFixed(2) }}</td>
              <td>
                <button id="a">+Tag</button>
                <span id="b">{{ item.tags[0] }}</span>
                <span id="b">{{ item.tags[1] }}</span>
              </td>
              <td>
                <button id="fn">删除</button>
              </td>
            </tr>
          </tbody>
          
        </table>
    <div></div>
  </div>
</template>

<script>
import bus from "../插槽bus";
export default {
  data() {
    return {};
  },
  computed: {
    data() {
      return bus.data;
    },
  },
  methods:{
    go(path) {
      this.$router.push(path)
    }
  }
};
</script>

<style scoped>
#a {
  background-color: rgb(0, 225, 255);
  color: #fff;
  border-radius: 6px;
  width: 50px;
  margin: 0 4px;
  font-size: 15px;
}
#b {
  background-color: rgb(229, 255, 0);
  margin-left: 5px;
  border-radius: 6px;
}
#fn {
  background-color: red;
  color: #fff;
  border-radius: 6px;
  border-top: 1px solid rgb(0, 255, 76);
}
#tab {
  width:100%;
  border-collapse: collapse;
}
.tab-item {
  text-align: left;
  
}
#box {
  display:flex;
  flex: 1;
}
/* #list-item {
  border-top: 5px solid red;
} */
tr {
  text-align: left;
  /* border-top: 1px solid red; */
}
tr td {
  border-right: 1px solid red;
  border-left: 1px solid red;
  border-bottom: 1px solid red;
  border-top: 1px solid red;
}
</style>